<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	
	<ui:composition template="/layout/maintemplate.xhtml">
		<ui:define name="maincontent">
			
			<ui:include src="/templates/messagePanels/inc_successmessagepanel.xhtml">
				<ui:param name="messagePanelId" value="successMessagePanelContainer" />
				<ui:param name="messagePanelTitle" value="#{messages.add_mediaitem_successMessageTitle}" />
				<ui:param name="messagePanelText" value="#{messages.add_mediaitem_successMessage}" />
			</ui:include>
			
			<h:form id="addMediaItemForm">
				
				<p:commandLink value="hohohoh" />
				
				<p:wizard id="mediaitemInputWizard" showStepStatus="false" widgetVar="addMediaItemInputWizard" 
						nextLabel="#{messages.next}" backLabel="#{messages.back}" onnext="hideMessagePanel('successMessagePanelContainer');" >
					
					<p:tab id="defaultdata">
					
						<p:panel header="#{messages.add_mediaitem_panel_masterdata}">
							<h:panelGrid id="masterdataInputGrid" columns="3" columnClasses="column-labels, column-inputs, column-facesmessages">
							
								<h:outputLabel id="mediatypeLabel" for="mediatypeSelect" value="#{messages.mediatype}:" />
								<p:selectOneMenu id="mediatypeSelect" value="#{addMediaItemBean.selectedMediaType}" valueChangeListener="#{addMediaItemBean.mediaTypeChanged}"
									 required="true" requiredMessage="#{messages.input_required}" >
									<f:selectItems value="#{addMediaItemBean.mediaTypes}" />
									<p:ajax event="change"  
										process="mediatypeSelect, mediatypeMessage" 
										update="mediatypeSelect, mediatypeMessage, qualitySelect, genreSelect" />
								</p:selectOneMenu>
								<p:message id="mediatypeMessage" for="mediatypeSelect" />
							
								<h:outputLabel id="titleLabel" for="titleInput" value="#{messages.title}:" />
								<h:column>
									<p:inputText id="titleInput" value="#{addMediaItemBean.title}" required="true" requiredMessage="#{messages.input_required}" >
										<f:validateLength maximum="#{addMediaItemBean.maximumTitleLength}" />
									</p:inputText>
									<h:outputText value="&#160;" />
									<p:commandButton id="mediaSearchButton" action="#{addMediaItemBean.searchForMediaByMediaTitle}" value="#{messages.add_mediaitem_mediasearch_searchbutton}" 
										process="titleInput mediaSearchButton" update="titleInput titleMessage :mediaSearchSelectionDialog" />
								</h:column>
								<p:message id="titleMessage" for="titleInput" />

								<h:outputLabel id="descriptionLabel" for="descriptionInputArea" value="#{messages.description}:" />
								
<!-- 								<h:column> -->
									<ui:include src="/templates/inc_inputtextareawithcounter.xhtml">
										<ui:param name="id" value="descriptionInputArea" />
										<ui:param name="value" value="#{addMediaItemBean.description}" />
										<ui:param name="required" value="true" />
										<ui:param name="requiredMessage" value="#{messages.input_required}" />
										<ui:param name="maxLength" value="#{addMediaItemBean.maximumDescriptionLength}" />
									</ui:include>
<!-- 								</h:column> -->
								
<!-- 								<p:inputTextarea id="descriptionInputArea" value="#{addMediaItemBean.description}" required="true" requiredMessage="#{messages.input_required}" /> -->
								
								<p:message id="descriptionMessage" for="descriptionInputArea" />
								
								<h:outputLabel id="releasedateLabel" for="releasedateInputCalendar" value="#{messages.releaseDate}:" />
								<p:calendar id="releasedateInputCalendar" value="#{addMediaItemBean.releaseDate}" required="true" requiredMessage="#{messages.input_required}" />
								<p:message id="releasedateMessage" for="releasedateInputCalendar" />
								
								<h:outputLabel id="qualityLabel" for="qualitySelect" value="#{messages.quality}:" />
								<p:selectOneMenu id="qualitySelect" value="#{addMediaItemBean.selectedQuality}" required="true" requiredMessage="#{messages.input_required}" 
										converter="#{addMediaItemBean.mediaQualityConverter}" >
									<f:selectItems value="#{addMediaItemBean.qualities}" var="quality" itemLabel="#{quality.name}" />
								</p:selectOneMenu>
								<p:message id="qualityMessage" for="qualitySelect" />
								
								<h:outputLabel id="genreLabel" for="genreSelect" value="#{messages.genres}:" />
								<p:selectManyMenu id="genreSelect" value="#{addMediaItemBean.selectedGenres}" required="true" requiredMessage="#{messages.input_required}" 
										converter="#{addMediaItemBean.genreConverter}" >
									<f:selectItems value="#{addMediaItemBean.genres}" var="genre" itemLabel="#{genre.name}" />
								</p:selectManyMenu>
								<p:message id="genreMessage" for="genreSelect" />
								
								<h:outputLabel id="trailerlinkLabel" for="trailerlinkInput" value="#{messages.trailerLink}:" />
								<p:inputText id="trailerlinkInput" value="#{addMediaItemBean.trailerLink}" required="true" requiredMessage="#{messages.input_required}" 
									validator="#{addMediaItemBean.validateTrailerLink}" type="url" />
								<p:message id="trailerlinkMessage" for="trailerlinkInput" />
								
								<h:outputLabel id="storageLabel" for="storageSelect" value="#{messages.storage}:" />
								<p:selectOneMenu id="storageSelect" value="#{addMediaItemBean.selectedStorage}" required="true" requiredMessage="#{messages.input_required}" 
										converter="#{addMediaItemBean.storageContainerConverter}">
									<f:selectItems value="#{addMediaItemBean.storages}" var="storage" itemLabel="#{storage.name}" />
								</p:selectOneMenu>
								<p:message id="storageMessage" for="storageSelect" />
							</h:panelGrid>
					</p:panel>
					
					</p:tab>
					<p:tab id="picturedata">
					
						<p:panel id="picturedataPanel" header="#{messages.add_mediaitem_panel_pictureupload}">
							<p:fileUpload id="pictureFileUpload" mode="advanced" multiple="true" dragDropSupport="true" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
								sizeLimit="#{addMediaItemBean.pictureUploadFileSizeLimitInBytes}" fileLimit="#{addMediaItemBean.pictureUploadFileLimit}" 
								fileUploadListener="#{addMediaItemBean.handleFileUpload}" process="@this" update="picturedataPanel" 
								uploadLabel="#{messages.upload}" cancelLabel="#{messages.cancel}" label="#{messages.chooseFiles}" 
								invalidFileMessage="#{messages.add_mediaitem_error_fileupload_invalidFileType}" 
								invalidSizeMessage="#{messages.add_mediaitem_error_fileupload_invalidFileSize}" />
							<p:message id="pictureFileUploadMessage" for="pictureFileUpload" />
						
							<h:panelGroup id="showUploadedImagesContainer" layout="block" rendered="#{not empty addMediaItemBean.uploadedPictures}">
								<ui:repeat id="uploadedPicturesDisplay" var="uploadedPicture" value="#{addMediaItemBean.uploadedPictures}" varStatus="uiRepeatElement">
									<h:panelGroup id="showUploadedImageContainer" layout="block" 
											styleClass="#{uploadedPicture.coverPictureForMediaItem == false ? 'ui-uploadimage-container' : 'ui-uploadimage-container-selected'}" >
										<p:commandLink id="deleteUploadedPictureLink" action="#{addMediaItemBean.discardUploadedPicture(uiRepeatElement.index)}"
											process="@this" update=":addMediaItemForm:picturedataPanel" 
											styleClass="ui-close-icon fa fa-times fa-2x" >
										</p:commandLink>
										<p:commandLink id="coverPictureSelectionLink" action="#{addMediaItemBean.selectUploadedPictureAsCover(uiRepeatElement.index)}" 
												process="@this" update=":addMediaItemForm:showUploadedImagesContainer">
											<p:graphicImage id="showUploadedImagePicture" value="#{addMediaItemBean.uploadedFileAsImageWithUseOfRequestParameter}" 
													styleClass="ui-uploadimage-container-content" >
												<f:param name="showUploadedImageName" value="#{uploadedPicture.name}" />
											</p:graphicImage>
											<p:tooltip for="showUploadedImagePicture" value="#{messages.add_mediaitem_tooltip_coverpictureselection}" />
										</p:commandLink>
									</h:panelGroup>
								</ui:repeat>
							</h:panelGroup>
							<h:panelGroup id="showUploadedImagesContainerEnd" layout="block" style="clear: left;" />
						</p:panel>
						
					</p:tab>
					<p:tab id="metadatadata">
					
						<p:panel id="metadataPanel" header="#{messages.add_mediaitem_panel_metadata}">
							<p:commandButton id="showMetadataAddPanelButton" value="+" type="button" style="float: right;" onclick="mdefInputDialog.show();">
								<p:tooltip for="showMetadataAddPanelButton" value="#{messages.inc_metadatavalueselection_tooltip_addButton}" />
							</p:commandButton>
							
							<ui:include src="/templates/inc_metadatavalueinput.xhtml">
								<ui:param name="incMetadataValueInputBean" value="#{addMediaItemBean}" />
								<ui:param name="outerIdsToUpdate" value="" />
							</ui:include>	
						</p:panel>
						
						<p:commandButton value="#{messages.save}" action="#{addMediaItemBean.save}" immediate="true" process="@form" update="@form" />
					
					</p:tab>
					
				</p:wizard>
			</h:form>
			
			<ui:include src="/templates/inc_addmetadatadefinitionmodaldialog.xhtml">
				<ui:param name="embeddedMetadataValueInputBeanSubClass" value="#{addMediaItemBean}" />
				<ui:param name="modalDialogWidgetVar" value="mdefInputDialog" />
				<ui:param name="outerIdsToUpdate" value=":addMediaItemForm:mediaitemInputWizard" />
			</ui:include>
			
			<p:dialog id="mediaSearchSelectionDialog" widgetVar="mSearchSelectDialog" resizable="false" modal="true" width="400" 
					header="#{messages.add_mediaitem_mediasearch_modaldialog_header}">
				<h:form id="mediaSearchSelectionForm">
					<p:dataTable id="mediaSearchSelectionTable" var="smallMediaEntity" value="#{addMediaItemBean.mediaSearchDataModel}" 
							emptyMessage="#{messages.noRecordsFound}" rendered="#{addMediaItemBean.mediaSearchDataModel != null}"
							 selectionMode="single">
						<p:ajax event="rowSelect" listener="#{addMediaItemBean.onMediaSearchRowSelect}" 
								update=":mediaSearchErrorMessage :mediaSearchSelectionForm" />
						<p:column headerText="#{messages.title}">
							<h:outputText value="#{smallMediaEntity.title}" />
						</p:column>
						<p:column headerText="#{messages.releaseDate}">
							<h:outputText value="#{smallMediaEntity.releaseYear}" />
						</p:column>
					</p:dataTable>
					
					<h:panelGroup id="genreMappingsPanel" layout="block" rendered="#{not empty addMediaItemBean.mediaSearchGenreMappingSelections}" style="margin-top: 30px;">
						<h:outputText value="#{messages.add_mediaitem_mediasearch_modaldialog_genreMappingLabel}:" />
						<h:dataTable id="genreMappingTable" value="#{addMediaItemBean.mediaSearchGenreMappingSelections}" var="genreMappingItem">
							<h:column>
								<h:outputText value="#{genreMappingItem.genreName} -- " />
							</h:column>
							<h:column>
								<p:selectOneMenu value = "#{genreMappingItem.mappedGenreName}">
									<f:selectItem itemLabel="#{addMediaItemBean.genreMappingOptionNew}" itemValue="#{addMediaItemBean.genreMappingOptionNew}" />
									<f:selectItem itemLabel="#{addMediaItemBean.genreMappingOptionIgnore}" itemValue="#{addMediaItemBean.genreMappingOptionIgnore}" />
									<f:selectItems value="#{addMediaItemBean.genres}" var="genre" itemLabel="#{genre.name}" itemValue="#{genre.name}" />
								</p:selectOneMenu>
							</h:column>
						</h:dataTable>
						<p:commandButton id="genreMappingsTakeoverButton" value="#{messages.accept}" action="#{addMediaItemBean.takeoverSearchedMediaEntitySelection}" 
								process=":mediaSearchSelectionForm:genreMappingsPanel" upate=":addMediaItemForm:masterdataInputGrid mediaSearchSelectionTable genreMappingsPanel" 
								oncomplete="mSearchSelectDialog.hide();" />
					</h:panelGroup>
				</h:form>
				<p:growl id="mediaSearchErrorMessage" showDetail="false" showSummary="true" />
			</p:dialog>
		</ui:define>
	</ui:composition>

</html>